import React, { useState } from 'react';
import HeadBanger from '../../components/HeadBanger';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { useAuth } from '../../components/BasicRouter';
import GopherProps from '../../objects/internal/GopherProps';
import { Button, Card, Col, Form, Input, Row } from 'antd';

export default function LoginPage(props: GopherProps) {
	const { t } = useTranslation();
	const history = useHistory();
	const auth = useAuth();
	const [username, setUsername] = useState('');
	const [password, setPassword] = useState('');

	const onLoginButtonPushed = (e: { preventDefault: () => void }) => {
		e.preventDefault();
		console.log(username, password);
		auth.login(username, password, (x) => {
			console.log(x);
			if (x) {
				history.push('/home');
			}
		});
	};

	return (
		<>
			<HeadBanger />
			<Row gutter={[32, 32]} className={'headbang'}>
				<Col lg={6} md={6} sm={12} xs={12} />
				<Col lg={12} md={12} sm={24} xs={24}>
					<Card title={t("title-login")}>
						<Form labelCol={{span: 3}}>
							<Form.Item label={t('label-username')} name={'username'}>
								<Input onChange={(x) => { setUsername(x.target.value); }} />
							</Form.Item>
							<Form.Item label={t('label-password')} name={'password'}>
								<Input type={'password'} onChange={(x) => { setPassword(x.target.value); }} />
							</Form.Item>
							<Form.Item wrapperCol={{offset: 3}}>
								<Button type={'primary'} htmlType={'submit'} onClick={onLoginButtonPushed}>{t('button-login')}</Button>
							</Form.Item>
						</Form>
					</Card>
				</Col>
				<Col lg={6} md={6} sm={12} xs={12} />
			</Row>
		</>
	);
}
